<!-- eslint-disable vue/require-v-for-key -->
<template>
  <div id="app">
    <div class="calender-class">
      <el-calendar ref="calendar">
        <template #header="{ date }">
          <span>Custom header content</span>
          <span>{{ date }}</span>
          <el-button-group>
            <el-button size="small" @click="selectDate('prev-month')">
              上个月
            </el-button>
            <el-button size="small" @click="selectDate('today')"
              >今天</el-button
            >
            <el-button size="small" @click="selectDate('next-month')">
              下个月
            </el-button>
          </el-button-group>
        </template>
        <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
        <template #date-cell="{ data }">
          <div class="day-content-class">
            <!--已排版-->
            <template v-if="viewDate[data.day]">
              <div class="header-class">
                <div class="day-class">
                  {{ data.day.split("-").slice(1).join("-") }}
                </div>
                <div class="handle-class">
                  <el-icon @click="handleWorkInfo(viewDate[data.day], data)"
                    ><EditPen
                  /></el-icon>
                </div>
              </div>
              <!--已排版-->
              <div class="paiban-class">
                <div v-for="dayValue in viewDate[data.day]">
                  <div class="paiban-name-class">{{ dayValue.groupName }}</div>
                </div>
              </div>
            </template>
            <!--未排版-->
            <template v-else>
              <div class="header-class">
                <div class="day-class">
                  {{ data.day.split("-").slice(1).join("-") }}
                </div>
                <div class="handle-class">
                  <el-icon @click="handleWorkInfo('12', data)"
                    ><EditPen
                  /></el-icon>
                </div>
              </div>
              <div class="no-work-class">
                <div class="icon-class"><i class="el-icon-date"></i></div>
                <div class="tips-class">暂无排班</div>
              </div>
            </template>
          </div>
        </template>
      </el-calendar>
    </div>
  </div>
</template>
<script setup lang="ts">
import { CalendarInstance, CalendarDateType } from "element-plus";
import { ref } from "vue";
let handleDay = ref();

function handleWorkInfo(info: any, data: any) {
  handleDay.value = data;
  // if (info && info.length > 0) {
  //   this.workInfoList = info;
  // } else {
  //   this.workInfoList = [];
  // }
}
const calendar = ref<CalendarInstance>();
const selectDate = (val: CalendarDateType) => {
  if (!calendar.value) return;
  calendar.value.selectDate(val);
};
let viewDate: any = ref({
  "2024-04-20": [
    {
      id: "2023-06-20",
      ruleName: "三班两运转",
      shiftName: "早",
      groupName: "甲",
      startTime: "2023-06-20 08:30",
      endTime: "2023-06-20 20:30",
      isNotHoliday: 0,
      classId: 1,
      date: "2023-06-20",
      sort: 1,
    },
    {
      id: "2023-06-20",
      ruleName: "三班两运转",
      shiftName: "中",
      groupName: "乙",
      startTime: "2023-06-20 20:30",
      endTime: "2023-06-21 08:30",
      isNotHoliday: 0,
      classId: 1,
      date: "2023-06-20",
      sort: 2,
    },
  ],
});
</script>
<style>
.el-table__fixed-right {
  height: 100% !important;
}
.calender-class {
  width: 100%;
  height: 100%;
}
.is-selected {
  color: #1989fa;
}
.el-calendar__body {
  height: 85vh;
}
.el-calendar-table {
  height: 100%;
}

.day-content-class {
  height: 100px;
  display: flex;
  flex-direction: column;
}
.header-class {
  flex: 1;
  display: flex;
  height: 18px;
  flex-direction: row;
  justify-content: space-between;
}
.day-class {
  flex: 4;
}
.handle-class {
  flex: 1;
}
.paiban-class {
  flex: 4;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
}

.paiban-name-class {
  padding-top: 10px;
}

.no-work-class {
  text-align: center;
  color: #cacaca;
}
.icon-class {
  font-size: 20px;
  margin-bottom: 20px;
}
</style>
